import {useState, useEffect, useContext} from 'react'
import { Tabs, message } from 'antd';
import style from './index.module.less'
import { awaitWrap, confirmAction } from '@src/assets/js/tool'
import { getTopicListRequest, delTopicRequest } from './ajax'
import { CaseContext } from '../../../context'
import { ServiceSchema, ServiceTopicSchema } from '@components/schema/service'
import TopicModal from './components/topicModal'
import ServiceList from './components/serviceList'
import { CaseSchema } from '@src/components/schema/caseSchema'
import ServiceModal from './components/serviceModal'
import DetailModal from './components/detailModal'
import ResultModal from './components/resultModal'
import FeedbackModal from './components/feedbackModal'
import TopicFinishModal from './components/topicFinishModal'

const {TabPane} = Tabs

async function initTopicList (caseid: string, activeKey: string, setTopicList: (v: ServiceTopicSchema[]) => void, setActiveKey: (v: string) => void) {
  const h = message.loading('加载中', 120)
  const [e, d] = await awaitWrap(getTopicListRequest(caseid))
  h()
  if (e === null && d !== null) {
    setTopicList(d)
    if (d.length > 0) {
      if (d.findIndex(li => li.id === activeKey) === -1) {
        setActiveKey(d[0].id)
      }
    }
  }
}

async function delHandle(id: string, refreshFn: () => void) {
  const h = message.loading('删除中', 120)
  const [e] = await awaitWrap(delTopicRequest(id))
  h()
  if (e === null) {
    refreshFn()
  }
}

function remove (key: string, topicList: ServiceTopicSchema[], refreshFn: () => void) {
  const l = topicList.find(li => li.id === key)
  if (l) {
    confirmAction(`您确定要删除 ${l.name} 吗？`, () => {
      delHandle(key, refreshFn)
    })
  }
}

function Main () {
  const c = useContext(CaseContext)
  const [topicList, setTopicList] = useState<ServiceTopicSchema[]>([])
  const [visible, setVisible] = useState(false)
  const [activeKey, setActiveKey] = useState('')
  const [detailVisible, setDetailVisible] = useState(false)
  const [modifyVisible, setModifyVisible] = useState(false)
  const [resultVisible, setResultVisible] = useState(false)
  const [feedbackVisible, setFeedbackVisible] = useState(false)
  const [topicFinishVisible, setTopicFinishVisible] = useState(false)
  const [modifyData, setModifyData] = useState<ServiceSchema|null>(null)
  const [cTopic, setCTopic] = useState<ServiceTopicSchema|null>(null)
  const [fnMap, setFnMap] = useState<{[k: string]: any}>({})
  useEffect(() => {
    initTopicList(c.caseid, activeKey, setTopicList, setActiveKey)
  }, [])
  const onEdit = (targetKey: any, action: 'add' | 'remove') => {
    if (action === 'add') {
      setVisible(true)
    } else {
      remove(targetKey, topicList, () => initTopicList(c.caseid, activeKey, setTopicList, setActiveKey));
    }
  }
  return (
    <div className={style.container}>
      <DetailModal data={modifyData} visible={detailVisible} hide={() => {setDetailVisible(false); setModifyData(null)}} />
      <TopicModal caseid={c.caseid} visible={visible} hide={() => setVisible(false)} refreshFn={() => initTopicList(c.caseid, activeKey, setTopicList, setActiveKey)} />
      <ServiceModal caseDetail={c.caseDetail} caseid={c.caseid} topic={cTopic} arbitrators={c.arbitrators} data={modifyData} visible={modifyVisible} hide={() => { setModifyVisible(false); setModifyData(null); setCTopic(null) }} refreshFn={() => {typeof fnMap.refreshList === 'function' && fnMap.refreshList()}} />
      <ResultModal visible={resultVisible} data={modifyData} hide={() => {setResultVisible(false); setModifyData(null)}} editable={c.editable} theme={cTopic as ServiceTopicSchema} refreshCurrentTableFn={() => {typeof fnMap.refreshList === 'function' && fnMap.refreshList()}} />
      <FeedbackModal visible={feedbackVisible} hide={() => {setFeedbackVisible(false); setModifyData(null)}} data={modifyData} />
      <TopicFinishModal visible={topicFinishVisible} hide={() => setTopicFinishVisible(false)} topic={cTopic as ServiceTopicSchema} onFinish={() => initTopicList(c.caseid, activeKey, setTopicList, setActiveKey) } />
      <div>
        <Tabs type="editable-card" activeKey={activeKey} onChange={setActiveKey} onEdit={onEdit}>
          {topicList.map((li, i) => {
            return (
              <TabPane tab={li.name} key={li.id}>
                <ServiceList
                  id={li.id}
                  caseid={c.caseid}
                  editable={c.editable}
                  caseDetail={c.caseDetail as CaseSchema}
                  topic={li} 
                  refreshFn={() => { initTopicList(c.caseid, activeKey, setTopicList, setActiveKey) }}
                  setRefreshListFn={(callback: () => void) => setFnMap({ refreshList: callback })}
                  showDetail={(d: ServiceSchema) => { setModifyData(d); setDetailVisible(true) }}
                  showResult={(d: ServiceSchema) => { setModifyData(d); setResultVisible(true); setCTopic(li) }}
                  showFeedback={(d: ServiceSchema) => { setModifyData(d); setFeedbackVisible(true) }}
                  showModify={(d: ServiceSchema | null) => { 
                    setCTopic(li)
                    setModifyData(d)
                    setModifyVisible(true)
                  }}
                  showTopicModal={() => {
                    setCTopic(li) 
                    setTopicFinishVisible(true);
                  }}
                />
              </TabPane>
            )
          })}
        </Tabs>
      </div>
    </div>
  )
}

export default Main
